<template>
  <div class="aside">
    <div class="supplier-info-box width-300 height-220 flex-center flex-col">
      <span class="font-24 font-w font-white">{{supplierInfo.supplierName}}</span>
      <span class="sort mar-t-20">{{supplierInfo.supplierCategoryNames}}</span>
    </div>
    <div class="pad-t-30 pad-l-19 pad-r-19 pad-b-30">
      <div class="font-14">
        <div v-if="supplierInfo.provinceName || supplierInfo.cityName || supplierInfo.districtName">
          <span class="gray-color">城市地区:</span>
          <span class="font-white">{{supplierInfo.provinceName}}&nbsp;{{supplierInfo.cityName}}&nbsp;{{supplierInfo.districtName}}</span>
        </div>
        <div v-if="supplierInfo.address">
          <span class="gray-color">详细地址:</span>
          <span class="font-white">{{supplierInfo.address}}</span>
        </div>
      </div>
      <div class="split-lint"></div>
      <div>
        <div class="v-align-c">
          <img :src="panelIcon" class="width-15" alt="">
          <span class="font-14 gray-color mar-l-2">
            供货数据:
          </span>
        </div>
        <div class="flex mar-t-20">
          <div class="flex-col">
            <div class="flex-col">
              <span class="font-14 gray-color">累计商品(件)</span>
              <span class="font-18 font-white mar-t-12">{{supplierInfo.goodsNum}}</span>
            </div>
            <div class="flex-col mar-t-20 pad-t-20">
              <span class="font-14 gray-color">累计销售额(元)</span>
              <span class="font-18 font-white mar-t-12">{{supplierInfo.orderPrice}}</span>
            </div>
          </div>
          <div class="flex-col" style="margin-left:70px">
            <div class="flex-col">
              <span class="font-14 gray-color">累计销量(件)</span>
              <span class="font-18 font-white mar-t-12">{{supplierInfo.salesNum}}</span>
            </div>
            <div class="flex-col mar-t-20 pad-t-20">
              <span class="font-14 gray-color">平均退款率</span>
              <span class="font-18 font-white mar-t-12" v-if="supplierInfo.refundRate">{{supplierInfo.refundRate * 100}}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import panelIcon from '@/assets/images/panel.png'
export default {
  data() {
    return {
      panelIcon
    }
  },
  props: {
    supplierInfo: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {
    this.supplierInfo.goodsNum = this.formatData(this.supplierInfo.goodsNum)
    this.supplierInfo.orderPrice = this.formatData(this.supplierInfo.orderPrice)
    this.supplierInfo.salesNum = this.formatData(this.supplierInfo.salesNum)
  },
  methods: {
    // 格式化数据信息
    formatData(num) {
      if (num < 1000) return num
      if (num >= 1000 && num < 10000) {
        const _num = (num * 1 / 1000).toFixed(2)
        return `${_num}k`
      }
      if (num >= 10000) {
        const _num = (num * 1 / 10000).toFixed(2)
        return `${_num}w`
      }
    }
  }
}
</script>

<style  rel="stylesheet/scss" lang="scss" scoped>
.aside {
  background: #252529;
  height: 921px;
  .supplier-info-box {
    background: url('../../../../../assets/images/supplier-info-bg.png') no-repeat;
    background-size: 100%;
    .sort {
      color: #1890FF;
      border: 1px solid #1890FF;
      border-radius: 4px;
      padding: 0px 9px;
    }
  }
  .split-lint {
    width: 260px;
    height: 1px;
    border-bottom: 1px dashed rgba(255,255,255,0.5);
    margin: 0 auto;
    margin-top: 33px;
    margin-bottom: 30px;
  }
  .gray-color {
    color:rgba(255,255,255,0.5);
  }
}

</style>